<style lang="scss">
    @import "../../../utils/base.scss";
    .wait{
        display: block;
        width: 26px;
        height: 26px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 50%;
        font-size: 14px;
        transition: background-color 0.2s ease-in-out;
        border-color: #2d8cf0;
        background-color: #2d8cf0;
    }

    .wait1{
        display: block;
        width: 26px;
        height: 26px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 50%;
        font-size: 14px;
        transition: background-color 0.2s ease-in-out;
        border-color: #2d8cf0;
        background-color: white;
    }
    .ivu-steps-item.ivu-steps-custom .ivu-steps-head-inner > .ivu-steps-icon{
        top: 0px;
    }
</style>

<template>
    <div>
        <template id="baseInfo">
            <div class="qheader" :style="{borderBottom:'1px solid rgb(210,210,210)',}">
                <p>基本信息</p>
            </div>
            <div class="gcontent">
                <Form ref="baseInfo" :model="applyinfo" :rules="projectInfoValidate" :label-width="labelWidth" label-position="left" class="form form_left" >
                    <Row v-if="reqId != null && reqId != ''">
                        <Col span="8" >
                            <FormItem label="工单ID：" >
                                <Input v-model="reqId"  :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8" >
                            <FormItem label="申请人：">
                                <Input v-model="applyinfo.people[0].exAccount" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="申请人联系电话：">
                                <Input v-model="applyinfo.people[0].fourA" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>   

                    <Row>
                        <Col span="8" >
                            <FormItem label="工单标题：" prop="duty">
                                <Input v-model="applyinfo.people[0].duty" placeholder="XXX资源池+XXX系统+标题描述" :readonly="ifedit" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="借用单位：" prop="outterCompany">
                                <Input v-model="applyinfo.people[0].outterCompany" :readonly="ifedit" />
                            </FormItem>
                        </Col>
                    </Row>   

                    <Row>
                        <Col span="8" >
                            <FormItem label="使用人:" prop="peopleName">
                                <Input v-if="ifedit" v-model="applyinfo.people[0].peopleName" :readonly="readonly" />
                                <!-- <Select v-else :label-in-value="true" v-model="applyinfo.people[0].peopleUserId" @on-change="checkUser" filterable clearable :disabled="ifedit">
                                    <Option v-for="(item,index) in userList" :value="item.id" :key="index">{{item.user_name}}</Option>
                                </Select> -->
                                <component v-else ref="inputSearch" :dataList="userList" :checkLable="applyinfo.people[0].peopleName" :is="'inputSearch'" :multiple="false" @on-change="checkUser2"></component>
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="使用人联系电话：" prop="Phone">
                                <Input  v-model="applyinfo.people[0].phone" :readonly="ifedit" />
                            </FormItem>
                        </Col>
                    </Row>   
                    <Row>
                        <Col span="8" >
                            <FormItem label="所属租户：" prop="roleId">
                                <Input v-if="ifedit" v-model="applyinfo.people[0].tenantName" :readonly="readonly" />
                                <Select v-else :label-in-value="true" v-model="applyinfo.roleId" @on-change="checkRole" filterable :disabled="ifedit">
                                    <Option v-for="item in roleList" :value="item.id" :key="item.id">{{item.role_name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="所属项目：" prop="projectId">
                                <Input v-if="ifedit" v-model="applyinfo.people[0].igroup" :readonly="readonly" />
                                <Select v-else :label-in-value="true"  v-model="applyinfo.projectId" filterable @on-change="checkProject" :disabled="ifedit">
                                    <Option v-for="item in projectList" :value="item.id" :key="item.id">{{item.project}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>   
                </Form>
            </div>
        </template>

    </div>
</template>

<script>
    import ajax from "../../../ajax_util"
    import Axios from 'axios'
    import inputSearch from '../../../base/input_search'

    export default {
        name: "apply",
        components:{
            inputSearch
        },

        data(){
            return{
                reqId:"",
                labelWidth: 140,
                readonly: true, //是否只读
                disabledDate: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now()-24*60*60*1000;
                    }
                },
                //ifedit: this.isedit,
                applyinfo:this.Papply,
                roleList:[],
                userList:[],
                projectList:[],
                sysList:[],
                projectInfoValidate:{
                    // duty:[
                    //     { required: true, type: 'string', message: '请填写工单标题', trigger: 'change' }
                    // ],
                    // outterCompany:[
                    //     { required: true, type: 'string', message: '请填写借用单位', trigger: 'change' }
                    // ],
                    // peopleUserId:[
                    //     { required: true, type: 'number', message: '请填写使用人', trigger: 'change' }
                    // ],
                },
            }
        },

        created:function(){

        },

        mounted:function(){
        },

        methods:{
            // getRole(){
            //     if (this.applyinfo.people[0].peopleUserId != undefined && this.applyinfo.people[0].peopleUserId != '' && this.applyinfo.people[0].peopleUserId != null) {
            //         var that=this;
            //         var url=this.CONFIG.url_know+ '/getRole/' + this.applyinfo.people[0].peopleUserId;
            //         ajax.get({
            //             that:that,
            //             url:url,
            //             success:function(data){
            //                 console.log('checkUser',data)
            //                 that.roleList = data
            //             }
            //         })
            //     }
            //     if (this.applyinfo.roleId != undefined && this.applyinfo.roleId != '' && this.applyinfo.roleId != null) {
            //         var that=this;
            //         var url = this.CONFIG.url_know + "/projects/" + this.applyinfo.roleId
            //         var that=this;
            //         ajax.get({
            //             url: url,
            //             that: that,
            //             params: null,
            //             success:function(data){
            //                 console.log("checkRole:",data)
            //                     that.projectList = data
            //             }
            //         })
            //     }
            // },
            checkUser(user){
                //var user = this.applyinfo.people[0].peopleUserId
                console.log('NameId',user)
                if (this.userList.length > 0) {
                    this.userList.forEach(item => {
                        if (item.id == user.value) {
                            this.applyinfo.people[0].phone = item.phone
                        }
                    });
                }
                this.applyinfo.people[0].peopleName = user.label
                var that=this;
                var url=this.CONFIG.url_know+ '/getRole/' + user.value;
                ajax.get({
                    that:that,
                    url:url,
                    success:function(data){
                        console.log('checkUser',data)
                        that.roleList = data
                    }
                })
            },

            checkUser2(list){
                console.log('list',list)
                this.applyinfo.people[0].peopleUserId = list[0].id
                this.applyinfo.people[0].peopleName  = list[0].user_name
                this.applyinfo.people[0].phone = list[0].phone
                this.roleList = list[0].roles

            },
            
            checkRole(roleId){
                this.applyinfo.people[0].tenantName = roleId.label
                console.log('checkRole',roleId)
                var url = this.CONFIG.url_know + "/projects/" + roleId.value
                var that=this;
                ajax.get({
                    url: url,
                    that: that,
                    params: null,
                    success:function(data){
                        console.log("checkRole:",data)
                            that.projectList = data
                    }
                })
            },

            checkProject(project){
                this.applyinfo.people[0].igroup = project.label
            },

            formatDate(value) {
                var date = new Date(value*1000);
                var year = date.getFullYear();
                var month = this.padDate(date.getMonth() + 1);
                var day = this.padDate(date.getDate());
                return year + '-' + month + '-' + day;
            },
            padDate(value) {
                return value <10 ? '0' + value:value;
            },

            validate(){
                var isSubmit = false
                this.$refs["baseInfo"].validate((valid) => {
                    if (valid) {
                        isSubmit = true
                    } else {
                        this.$refs.base.scrollTop = document.getElementById("baseInfo").offsetTop - 100
                        this.$Message.error('请填写必填项');
                    }
                })
                return isSubmit
            },
        },

        props:{
            ifedit: {},
            Papply: {},
            //PuserList:{},
            
        },
        // computed:{
        //     isEdit(){
        //         return this.$store.state.tabs.isEdit
        //     }
        // },
        watch:{
            // isEdit(Val){
            //     if((Val + '') === (this.reqId + '')){
            //         this.ifedit = false
            //     }else{
            //         this.ifedit = true
            //     }
            // },
            Papply(newV, oldv){
                this.applyinfo = newV
                // this.getRole()
            }
        }


    }
</script>
